<!-- 使用例子：

<u-sticky>
	<pb-date-filter-popup mode="date" @filter="change"></pb-date-filter-popup>
</u-sticky>

change(form) {
	this.queryParams.beginDate = form.beginDay||''
	this.queryParams.endDate = form.endDay||''
	....调用接口获取数据....
} -->

<template>
	<view class="filter-popup" :class="{'box-shadow-none':dateRange == false}">
		<view class="pb-flex-row pb-main-between pb-cross-center date-filter">
			<view v-if="dateRange" class="pb-flex-row pb-cross-center date-range" @click="openFilter">
				<text
					:class="{'date-gray':!showDateRange.beginDay}">{{showDateRange.beginDay?showDateRange.beginDay: '开始日期' }}</text>
				<text style="margin: 0 24rpx;">-</text>
				<text
					:class="{'date-gray':!showDateRange.endDay}">{{showDateRange.endDay?showDateRange.endDay:'结束日期'}}</text>

			</view>
			<slot name="right">
				<view class="pb-flex-row pb-cross-center filter-btn" @click="openFilter">
					<text :class="{'active': show}">筛选</text>
					<u-icon v-if="show" bold name="arrow-down" color="var(--uni-color-primary)" size="28rpx"></u-icon>
					<u-icon v-else name="arrow-down" color="#7A8599" size="28rpx"></u-icon>
				</view>
			</slot>
		</view>
		<pb-popup ref="pbPopup" mode="top">
			<view class="popup-content">
				<view class="condition-wrap">
					<view class="title">
						查询日期
					</view>
					<view class="pb-flex-wrap condition-list">
						<view v-for="item in dateData" :key="item.value" class="condition-item"
							:class="{'active': item.value == activeDate}" @click="dateClick(item)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="condition-wrap">
					<view class="title">
						指定范围
					</view>
					<pb-picker-date-range ref="dateRangePicker" :formDate="formDate" :mode="mode"
						@dateSelect="dateSelect">
					</pb-picker-date-range>
				</view>
			</view>
			<template #footer>
				<view class="pb-flex-row popup-btn-wrap">
					<button class="pb-expanded" @click="resetCondition">重置</button>
					<button class="pb-expanded" style="background-color: var(--uni-color-primary);color: white;"
						@click="confirm">确认</button>
				</view>
			</template>
		</pb-popup>
	</view>
</template>

<script>
	export default {
		name: "pb-date-filter-popup",
		props: {
			active: {
				type: Number,
				default: 1, //0, 1，3，6，12
				require: false,
				validator: function(value) {
					if (value == 0 || value == 1 || value == 3 || value == 6 || value == 12) {
						return true
					}
					return false
				}
			},
			mode: {
				type: String,
				default: "date", //date:年月日；year-month：年月
				require: false,
				validator: function(value) {
					if (value == 'datetime' || value == 'date' || value == 'year-month') {
						return true
					}
					return false
				}
			},
			beginDay: {
				type: String,
			},
			endDay: {
				type: String,
			},
			dateRange: {
				type: Boolean,
				default: true,
			}
		},
		data() {
			return {
				show: false,
				activeDate: null, //1，3，6，12
				isModify: false,
				form: {
					beginDay: null,
					endDay: null
				},
				dateData: [{
						name: '近一个月',
						value: 1
					},
					{
						name: '近三个月',
						value: 3
					},
					{
						name: '近半年',
						value: 6
					},
					{
						name: '近一年',
						value: 12
					}
				]
			};
		},
		computed: {
			showDateRange() {
				let dateFormat
				switch (this.mode) {
					case 'date':
						dateFormat = 'yyyy/mm/dd'
						break;
					case 'year-month':
						dateFormat = 'yyyy/mm'
						break;
					default:
						dateFormat = 'yyyy/mm/dd'
						break;
				}
				let range = {}
				range.beginDay = this.form.beginDay ? uni.$u.date(this.form.beginDay, dateFormat) : this.form
					.beginDay
				range.endDay = this.form.endDay ? uni.$u.date(this.form.endDay, dateFormat) : this.form.endDay
				return range
			},
			formDate() {
				if (this.activeDate == null) {
					return this.form
				}
				return {
					beginDay: null,
					endDay: null
				}
			}
		},
		watch: {
			activeDate: {
				handler(newV) {
					if (newV && newV != 0) {
						let begin = this.getRecentMonthDate(newV)[0]
						let end = this.getRecentMonthDate(newV)[1]
						if (this.mode == 'year-month') {
							var beginArray = begin.split("-");
							var endArray = end.split("-");
							begin = beginArray[0] + '-' + beginArray[1] + '-01'
							end = endArray[0] + '-' + endArray[1] + '-01'
						}
						this.form = {
							beginDay: begin,
							endDay: end
						}

					} else {
						this.form.beginDay = null
						this.form.endDay = null
					}
				},
				immediate: true
			},
			show(e) {
				this.$refs.pbPopup.show = e
			}
		},

		//小程序中组件的created生命周期会早于页面的onLoad
		//如果使用mounted代替created,computed计算属性会早于mounted
		//所以对beginDay和endDay赋初始值操作需要将组件延迟创建<pb-date-filter-popup v-if="beginDay">
		created() {
			if (this.mode == 'datetime') {
				this.mode = 'date'
			}
			if (this.beginDay && this.endDay) {
				this.form.beginDay = this.beginDay
				this.form.endDay = this.endDay
			} else {
				if (this.active == 0 || this.active == 1 || this.active == 3 || this.active == 6 || this.active == 12) {
					this.activeDate = this.active
				} else {
					this.activeDate = 1
				}
			}

			setTimeout(() => {
				this.$emit('filter', this.form)
			}, 100)

		},
		methods: {
			openFilter() {
				this.show = !this.show
				if (this.show) {
					this.$emit('open')
				} else {
					this.$emit('close')
				}
			},
			dateClick(e) {
				if (e.value == this.activeDate) {
					return
				}
				this.isModify = true
				this.$refs.dateRangePicker.resetDate()
				setTimeout(() => {
					this.activeDate = e.value
				}, 100)
			},
			dateSelect(e) {
				this.isModify = true
				let begin = e.beginDay
				let end = e.endDay
				if (this.mode == 'year-month') {
					if (begin) {
						begin = begin + '-01';
					}
					if (end) {
						end = end + '-01';
					}
				}
				this.activeDate = null
				this.form.beginDay = begin
				this.form.endDay = end
			},
			confirm() {
				this.show = false
				if (this.form.beginDay && this.form.endDay) {
					this.$refs.dateRangePicker.active = null
					if (this.isModify) {
						console.log('【pb-date-filter-popup】confirm=>' + JSON.stringify(this.form))
						this.$emit('filter', this.form)
					}
					this.isModify = false
				} else {
					this.$refs.dateRangePicker.resetDate()
					setTimeout(() => {
						this.activeDate = this.active
						setTimeout(() => {
							if (this.isModify) {
								console.log('【pb-date-filter-popup】confirm=>' + JSON.stringify(this.form))
								this.$emit('filter', this.form)
							}
							this.isModify = false
						}, 10)
					}, 10)
				}
			},
			resetCondition() {
				this.isModify = true
				if (this.beginDay && this.endDay) {
					this.$refs.dateRangePicker.resetDate(this.beginDay, this.endDay)
				} else {
					this.$refs.dateRangePicker.resetDate()
					setTimeout(() => {
						this.activeDate = this.active
					}, 10)
				}
			},
			// 近N月 - new Date()
			getRecentMonthDate(n) {
				let result = [];
				const datenow = new Date();
				let nyear = datenow.getFullYear();
				let nmonth = datenow.getMonth() + 1;
				nmonth = nmonth < 10 ? '0' + nmonth : nmonth;
				let nday = datenow.getDate();
				nday = nday < 10 ? '0' + nday : nday;
				const dateend =
					nyear.toString() + '-' + nmonth.toString() + '-' + nday.toString();
			
				datenow.setMonth(datenow.getMonth() - n);
				let dyear = datenow.getFullYear();
				let dmonth = datenow.getMonth() + 1;
				dmonth = dmonth < 10 ? '0' + dmonth : dmonth;
				let dday = datenow.getDate();
				dday = dday < 10 ? '0' + dday : dday;
				const datestart =
					dyear.toString() + '-' + dmonth.toString() + '-' + dday.toString();
				result = [datestart, dateend]
				return result;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.filter-popup {
		box-shadow: 0 1rpx 1rpx 1rpx rgba(0, 0, 0, 0.03);

		&.box-shadow-none {
			box-shadow: none;
		}

		.date-filter {
			padding: 24rpx 32rpx;
			background: #fff;

			.date-range {
				line-height: 48rpx;
				font-size: 32rpx;
				color: #4D5566;

				.date-gray {
					color: #C1C5CC;
				}
			}

			.filter-btn {
				font-size: 32rpx;
				color: #7A8599;

				text {
					margin-right: 6rpx;
				}

				.active {
					font-weight: 600;
					color: var(--uni-color-primary);
				}
			}
		}

		.popup-content {
			padding: 24rpx 0 24rpx 0;

			.condition-wrap {
				.title {
					padding: 0 32rpx;
					font-size: 32rpx;
					line-height: 48rpx;
				}

				.condition-list {
					padding: 0 32rpx;
					margin-bottom: 32rpx;

					.condition-item {
						width: calc((100% - 32rpx)/2);
						height: 80rpx;
						line-height: 44rpx;
						margin-top: 32rpx;
						padding: 18rpx 32rpx;
						box-sizing: border-box;
						text-align: center;
						color: #4D5566;
						background: #F2F3F5;
						border-radius: 8rpx;

						&:nth-child(odd) {
							margin-right: 32rpx;
						}
					}

					.active {
						font-weight: 600;
						color: var(--uni-color-primary);
						border: 2rpx solid var(--uni-color-primary);
					}
				}

				.date-range {
					padding: 32rpx 32rpx 0 32rpx;

					.begin-date,
					.end-date {
						height: 80rpx;
						line-height: 44rpx;
						padding: 18rpx 32rpx;
						box-sizing: border-box;
						color: #4D5566;
						background: #F2F3F5;
						border-radius: 8rpx;
					}

					.active {
						font-weight: 600;
						color: var(--uni-color-primary);
						border: 2rpx solid var(--uni-color-primary);
					}
				}
			}
		}

		.popup-btn-wrap {
			padding: 24rpx 16rpx;
			border-top: 2rpx solid #E1E4E9;

			button {
				margin: 0 16rpx;
				font-size: 32rpx;
			}
		}
	}
</style>